<template>
  <div class="outBox">
    <ul>
      <li>PDF原始文件路径： <a-input v-model:value="datas.inputdir" /></li>

      <li>输入镇街： <a-input v-model:value="datas.town" /></li>

      <li>PDF输出文件路径： <a-input v-model:value="datas.outdir" /></li>

      <li class="btnBox">
        <a-button type="primary" @click="goon"> 开始处理</a-button>

        <a-button type="primary" @click="datasOut.log = []"> 清空日志</a-button>
      </li>
    </ul>

    <div class="logs">
      <div>处理日志：</div>
      <p v-for="item in datasOut.log" :class="{ err: item.includes('error') }">
        {{ item }}
      </p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, toRaw } from "vue";

const datasOut = reactive<{ log: string[] }>({ log: [] });

const datas = reactive({
  inputdir: "",
  town: "",
  outdir: "",
});

const goon = () => {
  window.ipcRenderer.invoke("pdf-union", { ...toRaw(datas) });
};

onMounted(() => {
  window.ipcRenderer.on("msg-info", (evt, msg: string) => {
    datasOut.log.push(msg);
  });
});
</script>
<style scoped lang="less">
.outBox {
  display: flex;
  ul {
    width: 50%;
    max-width: 480px;
    padding: 10px;
    flex-shrink: 0;
    li {
      margin-bottom: 5px;
    }
    .btnBox {
      display: flex;
      justify-content: space-between;
    }
  }
  .logs {
    background-color: rgb(240, 240, 240);
    border: 1px solid #f1f1f1;
    box-sizing: border-box;
    height: 100vh;
    overflow: auto;
    flex-grow: 1;
    .err {
      color: #f00;
    }
  }
}
</style>
